<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import GeoJSON from 'ol/format/GeoJSON'
import Map from 'ol/Map'
import OSM from 'ol/source/OSM'
import Projection from 'ol/proj/Projection'
import VectorTileSource from 'ol/source/VectorTile'
import View from 'ol/View'
import {
  Tile as TileLayer,
  VectorTile as VectorTileLayer
} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const replacer = function (key, value) {
        if (value.geometry) {
          let type
          const rawType = value.type
          let geometry = value.geometry

          if (rawType === 1) {
            type = 'MultiPoint'
            if (geometry.length === 1) {
              type = 'Point'
              geometry = geometry[0]
            }
          } else if (rawType === 2) {
            type = 'MultiLineString'
            if (geometry.length === 1) {
              type = 'LineString'
              geometry = geometry[0]
            }
          } else if (rawType === 3) {
            type = 'Polygon'
            if (geometry.length > 1) {
              type = 'MultiPolygon'
              geometry = [geometry]
            }
          }

          return {
            'type': 'Feature',
            'geometry': {
              'type': type,
              'coordinates': geometry
            },
            'properties': value.tags
          }
        } else {
          return value
        }
      }

      const map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })

      const url = 'zlocal/data/geojson/countries.geojson'
      fetch(url)
        .then(function (response) {
          return response.json()
        })
        .then(function (json) {
          const tileIndex = window.geojsonvt(json, {
            extent: 4096,
            debug: 1
          })
          const format = new GeoJSON({
            // Data returned from geojson-vt is in tile pixel units
            dataProjection: new Projection({
              code: 'TILE_PIXELS',
              units: 'tile-pixels',
              extent: [0, 0, 4096, 4096]
            })
          })
          const vectorSource = new VectorTileSource({
            tileUrlFunction: function (tileCoord) {
              // Use the tile coordinate as a pseudo URL for caching purposes
              return JSON.stringify(tileCoord)
            },
            tileLoadFunction: function (tile, url) {
              const tileCoord = JSON.parse(url)
              const data = tileIndex.getTile(
                tileCoord[0],
                tileCoord[1],
                tileCoord[2]
              )
              const geojson = JSON.stringify(
                {
                  type: 'FeatureCollection',
                  features: data ? data.features : []
                },
                replacer
              )
              const features = format.readFeatures(geojson, {
                extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord),
                featureProjection: map.getView().getProjection()
              })
              tile.setFeatures(features)
            }
          })
          const vectorLayer = new VectorTileLayer({
            source: vectorSource
          })
          map.addLayer(vectorLayer)
        })
    }
  }
}
</script>

<style scoped>

</style>
